<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>测评小组端-首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"/>
    <meta content="Coderthemes" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- App favicon -->
    <link rel="shortcut icon" href="./assets/images/favicon.ico">

    <!-- App css -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/app.css" rel="stylesheet" type="text/css"/>

    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

    <style>

        .content-page-zzp {
            margin-left: 15px;
            overflow: hidden;
            padding: 5px 20px;
            min-height: 80vh;
        }
    </style>

</head>

<body>

<!-- Begin page -->
<div id="wrapper">


    <!-- ========== Left Sidebar Start ========== -->
    <div th:include="commons/surveySideBar :: sidebar"/>
    <!-- Left Sidebar End -->

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <div class="content-page">
        <div class="content">

            <!-- TopBar Start -->
            <div th:replace="commons/surveyTopBar :: topbar "/>
            <!-- end TopBar -->

            <!-- Start Content-->
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                                    <li class="breadcrumb-item active"></li>
                                </ol>
                            </div>
                            <h4 class="page-title"></h4>
                        </div>
                    </div>
                </div>

                <div class="content-page-zzp">
                    <div class="content row " >
                        <!--学业表现审核图表-->
                        <div class="col-md-4  border-0 align-content-center" style="border: solid 1px;color: red;padding: 0;">
                            <div id="academicChar"  style="height:250px;width:220px;"></div>
                        </div>

                        <!--行为表现审核图表-->
                        <div class="col-md-4 border-0 align-content-center" style="border: solid 1px;color: red;padding: 0;">
                            <div id="behaviorChar"  style="height:250px;width:220px;"></div>
                        </div>

                        <!--专业技能审核图表-->
                        <div class="col-md-4 border-0 align-content-center" style="border: solid 1px;color: red;padding: 0;">
                            <div id="professionalChar"  style="height:250px;width:220px;"></div>
                        </div>
                    </div>

                    <div class="card-body"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                        <h4 class="header-title">成绩分布数据：</h4>

                        <canvas id="bar" height="350" class="mt-4 chartjs-render-monitor" width="524" style="display: block;"></canvas>

                    </div>














                    <!-- end page title -->
                </div> <!-- container -->
            </div> <!-- content -->

            <!-- Footer Start -->
            <div th:replace="commons/footer :: foot"></div>
            <!-- end Footer -->
        </div>

        <!-- ============================================================== -->
        <!-- End Page content -->
        <!-- ============================================================== -->

    </div>
    <!-- END wrapper -->

</div>


    <!-- App js -->
    <script src="./js/vendor.js"></script>
    <script src="./js/app.js"></script>

    <!-- Plugins js -->
    <script src="./js/vendor/Chart.bundle.js"></script>
    <script src="./js/vendor/jquery.sparkline.min.js"></script>
    <script src="./js/vendor/jquery.knob.min.js"></script>
    <script src="./js/pages/dashboard.init.js"></script>


    <!--echars-->

    <!--学业表现饼图-->
    <script>
        var myChart1 = echarts.init(document.getElementById("academicChar"));


        $.get('/stuInfoSystem/getAcademicChartData',{},function (data) {

            console.log(data);

            var option1 = {
                title: {
                    text: '学业表现审核状况',
                    // subtext: '虚构数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: ' <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    // orient: 'vertical',
                    // top: 'middle',
                    bottom: 10,
                    left: 'center',
                    data: ['未提交', '待审核', '已审核', '待修改']
                },
                series: [
                    {
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: [
                            {name: "未提交", value: data.status_0},
                            {name: "待审核", value: data.status_1},
                            {name: "已审核", value: data.status_2},
                            {name: "待修改", value: data.status_3},
                        ],
                        label: {
                            normal: {
                                position: 'inner',
                                show : false
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        color: [ '#8E99A2','#4C89E2','#23B542', '#F0566E'],
                    }
                ]
            };

            console.log(option1);

            // 为echarts对象加载数据
            myChart1.setOption(option1);

        });




    </script>

    <!--行为表现饼图-->
    <script>
        var myChart2 = echarts.init(document.getElementById("behaviorChar"));

        $.get('/stuInfoSystem/getBehaviorStatusNum',{},function (datas) {
            var option2 = {
                title: {
                    text: '行为表现审核状况',
                    // subtext: '虚构数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: ' <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    // orient: 'vertical',
                    // top: 'middle',
                    bottom: 10,
                    left: 'center',
                    data: ['未提交', '待审核', '已审核', '待修改']
                },
                series: [
                    {
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: datas,
                        label: {
                            normal: {
                                position: 'inner',
                                show : false
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        color: [ '#8E99A2','#4C89E2','#23B542', '#F0566E'],
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart2.setOption(option2);
        });





    </script>

    <!--专业技能饼图-->
    <script>
        var myChart3 = echarts.init(document.getElementById("professionalChar"));


        $.get('/stuInfoSystem/getProfrssionalSkillChartData',{},function (data) {

            var option3 = {
                title: {
                    text: '专业技能审核状况',
                    // subtext: '虚构数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: ' <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    // orient: 'vertical',
                    // top: 'middle',
                    bottom: 10,
                    left: 'center',
                    data: ['未提交', '待审核', '已审核', '待修改']
                },
                series: [
                    {
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: [
                            {name: "未提交", value: data.status_0},
                            {name: "待审核", value: data.status_1},
                            {name: "已审核", value: data.status_2},
                            {name: "待修改", value: data.status_3},
                        ],
                        label: {
                            normal: {
                                position: 'inner',
                                show : false
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        color: [ '#8E99A2','#4C89E2','#23B542', '#F0566E'],
                    }
                ]
            };

            // 为echarts对象加载数据
            myChart3.setOption(option3);
        });
    </script>


</body>
</html>